import { Component } from 'react'
import { View, Text, Image } from '@tarojs/components'
import { observer, inject } from 'mobx-react'
import {navigateTo} from '@tarojs/taro'
import headImg from '@/assets/commons/broad1.png'
import active1Img from '@/assets/commons/active1.png'
import active2Img from '@/assets/commons/active2.png'
import active3Img from '@/assets/commons/active3.png'
import active4Img from '@/assets/commons/active4.png'
import rightIcon from '@/assets/commons/gt.png'
import await1Img from '@/assets/commons/await1.png'
import await2Img from '@/assets/commons/await2.png'
import await3Img from '@/assets/commons/await3.png'
import await4Img from '@/assets/commons/await4.png'
import await5Img from '@/assets/commons/await5.png'

import './index.scss'


@inject('store')
@observer
class Mine extends Component {
  state ={
    activeList: [
      {
        id:1,
        icon: active1Img,
        title: '优惠券',
        rightIcon
      },
      {
        id:2,
        icon: active2Img,
        title: '购物车',
        rightIcon
      },
      {
        id:3,
        icon: active3Img,
        title: '消息',
        rightIcon
      },
      {
        id:4,
        icon: active4Img,
        title: '直播秒杀',
        rightIcon
      }
    ],
    awaitList: [
      {
        id: 1,
        img: await1Img,
        title: '代付款'
      },
      {
        id: 2,
        img: await2Img,
        title: '待收货'
      },
      {
        id: 3,
        img: await3Img,
        title: '待评价'
      },
      {
        id: 4,
        img: await4Img,
        title: '售后'
      },
      {
        id: 5,
        img: await5Img,
        title: '全部订单'
      }
    ]
  }
  componentWillMount () { }

  componentDidMount () { }

  componentWillUnmount () { }

  componentDidShow () { }

  componentDidHide () { }

  activeCont(list) {
    return (
      <View className="activeList">
        {
          list.map(item => (
            <View 
              className="active-item"
               key={item.id}
              >
              <Image src={item.icon} className="active-icon" />
              <Text className="active-title">{item.title}</Text>
              <Image className="active-rightIcon" src={item.rightIcon}/>
          </View>
          ))
        }
      </View>
    )
  }

  awaitCont(list) {
    return (
      <View className="await">
      {
        list.map(item => (
          <View className="await-item" key={item.id}>
            <Image className="await-img" src={item.img} />
            <Text className="await-title">{item.title}</Text>
          </View>
        ))
      }
      </View>
    )
  }

  render () {
    const {
      activeList,
      awaitList
    } = this.state
    return (
      <View className='mine'>
        <View className="head">
          <Image className="head-img" src={headImg} />
          <View className="user-info">
            <Text className="user-name">微蜜的夏天</Text>
            <View className="user-addr" onClick={() => navigateTo({url: '/pages/map/map'})}>我的收获地址 {'>'} </View>
          </View>
        </View>
        {this.awaitCont(awaitList)}
        {this.activeCont(activeList)}
      </View>
    )
  }
}

export default Mine
